<template>
  <el-container>
    <el-header>
      <!-- fetch-suggestions 当输入改变的时候，该方法会得到触发
          :select-when-unmatched="true" 当为true的时候，@select方法才有效
      -->
      <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
      >
      </el-autocomplete>
      &nbsp;&nbsp;&nbsp;
      <el-button @click="executeSearch" type="danger">搜索一下</el-button>
    </el-header>
    <el-divider></el-divider> <!-- 分割线 -->
    <el-main>
      <el-card v-for="n in newsList" class="box-card" :key="n.id">
        <h3><a :href="n.url" v-html="n.title"></a></h3>
        <p v-html="n.content">
        </p>
      </el-card>

    </el-main>
  </el-container>
</template>

<script>

  export default {
    data() {
      return {
        restaurants: [],
        state: '',
        timeout: null,
        newsList: []
      };
    },
    methods: {
      loadAll() {
        this.axios.get("http://localhost:8080/search/execute?searchText=" + this.queryText)
        .then(resp => {
          this.newsList = resp.data;
        });
      },
      executeSearch() {
        console.log("1111")
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString))
            : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }

  }
</script>

<style>

</style>
